import React from 'react';
import { Select } from 'antd';
import './index.less';


const { Option } = Select;

class Td extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      inputValue: this.props.value,
      selectValue: {},
      newInputValue: {},
    };
  }
  showEditInput=(value) => {
    const { inputValue } = this.state;
    if (value === 'yes') {
      this.setState({ show: true });
    } else if (value === 'no') {
      this.setState({ show: false });
    }
    // console.log(object);
    const selectValues = this.props.insuranceType.filter(val => (val.name === inputValue.insurance.name));
    this.setState({ selectValue: selectValues[0] });
  }
  handleOnChange=(value, key) => {
    const { inputValue } = this.state;
    inputValue[key] = value;
    this.setState({ inputValue: { ...this.state.inputValue } });
    console.log(inputValue);
  }
  handleOnChangeSelect=(value) => {
    const selectValues = this.props.insuranceType.filter(val => (val.name === value));
    this.setState({ selectValue: selectValues[0] });
    // const { insurance } = this.state.inputValue;
    // this.setState({ insurance: this.state.selectValue });
  }
  sureEdit=() => {
    const { inputValue, selectValue } = this.state;
    inputValue.insurance = selectValue;
    inputValue.name = selectValue.name;
    inputValue.uid = inputValue.user.id;
    this.setState({ show: false });
    this.setState({ inputValue: { ...this.state.inputValue } });
    this.props.sureEdit(inputValue);
  }
  render() {
    const { index, value = {}, insuranceType = [] } = this.props;
    const { show, inputValue, selectValue } = this.state;
    const cls = !show ? '' : 'hide';
    const hide = show ? '' : 'hide';
    return (
      <React.Fragment>
        <td>{index + 1}</td>
        <td>{inputValue.user.name}</td>
        <td>{inputValue.erp_id}</td>
        <td>{inputValue.user.sex}</td>
        <td>{inputValue.user.idcard}</td>
        <td className={cls}>{inputValue.insurance.name}</td>
        <td className={hide}>
          <Select
            value={selectValue.name || ''}
            showSearch
            style={{ width: 200 }}
            placeholder="选择证书"
            onChange={val => this.handleOnChangeSelect(val, 'name')}
            optionFilterProp="children"
            filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
          >
            {
              insuranceType.map((val, ind) => (
                <Option value={val.name} key={ind}>{val.name}</Option>
                  ))
              }
          </Select>
        </td>
        <td>{selectValue.amount || inputValue.insurance.amount}</td>
        <td className={cls}>{inputValue.tax}</td>
        <td className={hide}>
          <input
            className="module-input"
            type="text"
            value={inputValue.tax || ''}
            onChange={e => this.handleOnChange(e.target.value, 'tax')}
          />
        </td>
        <td>{inputValue.descr}</td>
        <td>
          <button className={`sure-button ${cls}`} onClick={() => this.showEditInput('yes')}>编辑</button>
          <button className={`green-button ${hide}`} onClick={this.sureEdit}>保存</button>
          <button className={`clearButton ${hide}`} onClick={() => this.showEditInput('no')}>取消</button>
        </td>
      </React.Fragment>
    );
  }
}
// Td.defaultProps = {
//   value: {
//     name: '',
//     descr: '',
//   }
// };

export default Td;
